<!-- 地址 -->
<template>
	<view v-show="isExpress" class="container" @click="handleShowChoosePanel()">
		<!-- 无地址 -->
		<view class="address-box" v-if="!chooseAddress">
			<view class="address">
				<view class="label">请选择收货地址 <text class="right-icon iconfont">&#xe609;</text></view>
			</view>
		</view>
		<!-- 有地址 -->
		<view class="address-box" v-else>
			<view class="address">
				<view class="label">{{chooseAddress.region_name}}{{chooseAddress.address}}
					<text class="right-icon position-absolute iconfont">&#xe609;</text>
				</view>
			</view>
			<view class="contact">
				<text class="label">{{chooseAddress.name}}</text>
				<text class="label">{{chooseAddress.phone}}</text>
			</view>
		</view>
		<!-- 分隔线 -->
		<view class="devider">
			<view class="item" v-for="value in 20" :key="value"></view>
		</view>
	</view>

	<!-- 选择地址 -->
	<ChooseAddress v-model:visible="visible"></ChooseAddress>
</template>

<script setup>
	import ChooseAddress from './choose-address.vue';
	import { ref } from 'vue';
	import { storeToRefs } from 'pinia';
	import { useSubmitOrderStore } from '../store.js';

	const visible = ref(false);
	const store = useSubmitOrderStore();
	const { chooseAddress, isExpress } = storeToRefs(store);

	// 显示选择面板
	const handleShowChoosePanel = () => {
		visible.value = true;
	}
</script>

<style lang="scss" scoped>
	.container {
		position: relative;
		height: 214rpx;
		background-color: white;

		.devider {
			position: absolute;
			bottom: 0;
			left: 0;
			display: flex;
			flex-wrap: nowrap;
			width: 100%;
			height: 8rpx;
			overflow: hidden;

			.item {
				flex-shrink: 0;
				width: 30rpx;
				height: inherit;
				transform: skewX(-32deg);
				margin-right: 14rpx;

				&:nth-child(even) {
					background-color: #042EB3;
				}

				&:nth-child(odd) {
					background-color: #DA2A2A;
				}
			}
		}

		.address-box {
			height: inherit;
			padding: 0 66rpx 0 106rpx;
			box-sizing: border-box;
			display: flex;
			flex-direction: column;
			justify-content: center;
			box-sizing: border-box;

			&.show-right-icon {
				position: relative;

				&::after {
					position: absolute;
					right: 66rpx;
					top: 50%;

					display: block;
					content: '\e609';
					font-family: 'iconfont';
					font-size: 20rpx;
					color: #222;
				}
			}

			.address {
				position: relative;
				line-height: 42rpx;

				&::before {
					position: absolute;
					left: -50rpx;
					top: 0;
					display: block;
					content: '\e610';
					font-family: 'iconfont';
					font-size: 34rpx;
					color: #FE3333;
				}

				.label {
					font-weight: 500;
					font-size: 30rpx;
					color: #222222;
					padding-right: 34rpx;

					.right-icon {
						font-size: 20rpx;

						&.position-absolute {
							position: absolute;
							top: 0;
							right: 0;
						}
					}
				}
			}

			.contact {
				margin-top: 16rpx;

				.label {
					font-weight: 500;
					font-size: 28rpx;
					color: #999999;
					line-height: 40rpx;

					&+.label {
						margin-left: 20rpx;
					}
				}
			}
		}
	}
</style>